import { computed, watch } from "vue"

export const useText = (uuid: string, store: any) => {
  const config = computed(() => {
    return {
      text: store.widgetConfig[uuid].text,
      style: {
        color: store.widgetConfig[uuid].textColor,
        fontSize: store.widgetConfig[uuid].textFontSize + 'px',
        fontWeight: store.widgetConfig[uuid].textFontWeight,
        fontFamily: store.widgetConfig[uuid].textFontFamily,
        textAlign: store.widgetConfig[uuid].textAalign,
      }
    }
  })
  return config
}

export const useImage = (uuid: string, store: any) => {
  const config = computed(() => {
    return {
      style: {
        ...store.widgetConfig[uuid],
        backgroundImage: `url(${store.widgetConfig[uuid].backgroundImage})`,
        width: '100%',
        height: '100%'
      }
    }
  })
  return config
}

export const useUpdate = (watchList: any[], watchInstance: any, options: any) => {
  watch(watchList, (value) => {
    let optionsTmp = {
      ...options,
    }
    value.forEach(config => {
      optionsTmp = {
        ...optionsTmp,
        ...config,
      }
    })
    watchInstance.setOption(optionsTmp)
  }, {
    immediate: true,
  })
}